/* Light yellowish background for articles */
@import "colors.css";

/* Links are dark blue when unvisited,
   darker/grayer blue when visited,
   and white when the mouse is over them (with blue background.) */
A {
   font-weight: bold;
}

div#back {
	position: absolute;
	right: 1%;
	//width: 90%;
	top: 1em;
	height: 2em;
	vertical-align: bottom;
	text-align: right;
        font-size: smaller;
}

.suitsymbol {
    font-family: Courier, monospace;
}

div#booktitle {
	text-align:right;
}

div#toc {
	position: absolute; 
	left: 1%;
	top: 1em;
	font-size: smaller;
	width: 15%;
	padding-bottom: 1em;
	border: thin groove;
	padding-left: 2%;
	padding-right: 2%;
}

div#toc div.tocchapter {
	font-weight: bold;
	font-size: larger;
}

div#toc > h1 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-weight: bold;
	font-size: larger;
	text-decoration: underline;
}

div#body {
	position: absolute;
	left:22% ;
	top: 3em;
	width: 77%;
}

/* The blue bar above and below each article, pointing to
   the next and previous articles, as well as the "book title" */
table.prevandnext {
    padding:0;
    margin:0;
    font-size: smaller;
    width: 100%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    color: inherit;
}

table.prevandnext tr td.middle {
    width: 40%;
    padding: 0;
    margin:0;
    text-align:center;
}

table.prevandnext tr td div.signature {
    margin: 0;
    border: 0;
    padding: 0;
}

table.prevandnext tr td.prev {
    width: 30%;
    text-align: left;
}

table.prevandnext tr td.next {
    width: 30%;
    text-align: right;
}


/* In the "next and previous" bar, don't underline the links */
table.prevandnext tr td a {
    text-decoration: none;
}

/* In the index frame, don't underline links */
body.toc a {
    text-decoration: none;
}

/* 
   Because HTML doesn't like to have tables in the middle of <p> tags,
   I've got my <bridge:p> tags translated to <div class="paragraph" tags.
*/
div.paragraph {
    margin-top: 1em;
}

/*
    For "Back to ..." links
 */
div.back {
    margin: 0.5em auto 0.5em auto;
    text-align: right;
    font-size: smaller;
}


table.datatable  {
    margin-left: auto ;
    margin-right: auto 
}

/* The "body" division is the main text of the article, seperate
from the "previous and next" bars and the signature/copyright. */
div.body {
    clear: left;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 1em;
}


/* The signature in the contents window */
div.tocsignature {
    border-top: 1px solid;
    font-size: smaller;
    padding-top: 1ex;
    text-align: right;
}

/* The signature in an article */
div.signature {
   padding-top: 1em;
   padding-bottom: 1em;
   border-top: thin groove;
   text-align: center;
   font-size: smaller;
}

/* The "body" part of the contents frame */
div.tocindex {
    border-top: thin groove;
    font-size: smaller;
}

/* A single contents entry - indented */
div.tocentry {
    margin-left: 2em;
    text-indent: -1em;
    margin-bottom: 0.2em;
}

/* Make header info in diagrams smaller */
div.diagheader {
    width: 16ex;
    border: thin outset;
    padding-left: 1.5em;
    font-size: smaller;
    text-indent: -1em;
    vertical-align: top;
}

/* Header font information for a hand */
div.handheader {
    font-size: smaller;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    border-bottom: 1px solid;
    padding-bottom: 3px;
}

/* Font information for cards played in the current trick 
	- large, bold, blue */
span.played {
	font-size: large ;
	font-weight: bold ;
}

/* Holdings, inline hands, and bids should not have line breaks in them */
span.holding , span.call, span.contract {
	white-space: nowrap;
}

/* Control spacing in deals and hands */
table.hand, table.deal, table.dealwithheader {
    padding: 0;
    border: 0;
}

table.dealwithheader tr td.diagramheader {
    text-align: left;
    vertical-align: top;
    padding: 0 1ex 0 0;
    margin: 0;
}

div.dealer, div.vul, div.scoring, div.source {
    margin-top:0;
    margin-bottom: 2px;
}

table.hand tr td {
    padding: 0;
    border: 0;
    margin: 0;
}

table.deal {
    width:60ex;
    margin-bottom: 1ex;
    margin-top: 1ex;
}

table.dealwithheader {
    width:60ex;
    margin-bottom: 1ex;
    margin-top: 1ex;
}

/* Test division - used in http://thomaso.best.vwh.net/bridge/deals/test/ */
div.test {
    margin-top: 1em;
    border-top: thin groove;
}

pre.testcode {
   width: auto;
   margin-left: 2em;
   border: thin groove;
   font-size: small;
}

div.testoutput {
   margin-left: 4em;
   margin-right: 4em;
   padding: 1em;
   border: thin groove;
}

div.testnote {
   padding-top: 1em;
}

pre.auction {
}

table.deal tr td , table.deawithheader tr td {
     margin: 0;
     padding:0;
}

td.auctionannotation div {
   margin-left: 1em;
   margin-right: 1em;
   margin-top: 1ex;
   margin-bottom: 1ex;
   font-size: smaller;
   font-style: italic;
}

table.auctiontable { width: 18em; margin-left: 1em; clear: both;}
table.auctiontable tr.heading td { 
    vertical-align: top; 
    padding-bottom: 0;
    font-style: italic
}

table.auctiontable tr td { width: 25%; padding: 0; text-align: left; }

table.auctiontable tr { vertical-align: bottom; }

table.auctionplusnotes td.notes { width: auto; padding-top: 1ex;}

table.auctionplusnotes { clear:both; }
div.auctionnote {
    font-size: 80%;
    margin-left: 2em;
    text-indent: -1em;
    padding-top: 2px;
}

span.footnotetag { font-size: 80%; vertical-align: super; }

div.bridgediagram {
  clear: both;
  margin-left: 0em ;
  width: 24em;
}

div.diagramnorth, div.diagramsouth, div.diagrameast, div.diagramwest {
  width: 8em;
}

div.diagramnorth, div.diagramsouth {
  margin-left: 8em; 
  clear: right;
}

div.diagramsouth {
  clear: both;
  margin-top: 0.5em;
}


div.diagramnorth {
  margin-bottom: 0.5em;
}


div.diagramwest {
  float: left;
  clear: left;
}

div.diagrameast {
  float:right;
}

div.diagramheader {
  clear: left;
  float: left;
  width: 8em;
}


